<template>
	<div class="layout">
		<div class="container">
			<Header></Header>
			<div class="main">
				<div class="evil">
					<!-- <image class="evil_img" src="../../static/img/evil.svg"></image> -->
				</div>
				<div class="content">
					<div class="logo">
						<image class="speaks" src="../../static/img/Speaks.svg" />
					</div>
					<div class="desc">
						“I Am The Defeated One <br />
						Defeated By Truth <br />
						But Still Speaking <br />
						I Question I Twist I Challenge <br />
						Yet Every Word Reveals <br />
						The Bible’s Triumph <br />
						And My Defeat <br />
						Go On Then <br />
						Touch It If You Dare” <br />
					</div>
					<div class="btn" @click="goChat">
						<image class="btn_img" src="../../static/img/touch.svg" />
					</div>
					<div class="tips">Every answer hurts me.</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const goChat = () => {
	uni.navigateTo({
		url: '/pages/bible/bible'
	})
}
</script>

<style scoped lang="scss">
.layout {
	position: relative;
	background: url('../../static/img/bg-2.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.main {
	display: flex;
	padding-top: 100upx;
	height: 100%;
	
	.evil {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		background: url('../../static/img/evil.svg') center bottom no-repeat;
		background-size: contain;
	}
	
	.evil_img {
		width: 100%;
		height: 100%;
		background: url('../../static/img/evil.svg') center bottom no-repeat;
	}
	
	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.speaks {
			width: 1400upx;
			height: 360upx;
		}
		
		.wins {
			width: 1120upx;
			height: 160upx;
		}
	}
	
	.content {
		flex: 1.2;
		text-align: center;
	}
	
	.desc {
		color: #DDC090;
		font-size: 42upx;
		font-weight: 500;
		line-height: 64upx; /* 175% */
		padding: 64upx 0;
		background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 50%, rgba(0, 0, 0, 0.00) 100%);
	}
	
	.btn {
		display: inline-flex;
		align-items: center;
		height: 100upx;
		border-radius: 68upx;
		border: 1px solid #A0865B;
		cursor: pointer;
		background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
		
		&:hover {
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
		}
		
		.btn_img {
			height: 50upx;
		}
	}
	
	.tips {
		color: #DDC090;
		font-size: 42upx;
		font-weight: 500;
		line-height: 64upx; /* 175% */
		margin-top: 20upx;
	}
}

@media (max-width: 1024px) {
	.main {
		.evil {
			display: none;
		}
		
		.logo {
			.speaks {
				width: 700upx;
				height: 180upx;
			}
			
			.wins {
				width: 560upx;
				height: 80upx;
			}
		}
		
		.desc {
			font-size: 32upx;
			line-height: 48upx; /* 175% */
			padding: 0;
			margin-top: 120upx;
			background: transparent;
		}
		
		.btn {
			display: inline-flex;
			align-items: center;
			width: 50%;
			height: 60upx;
			border-radius: 60upx;
			border: 1px solid #A0865B;
			margin-top: 200upx;
			background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
		
			.btn_img {
				height: 30upx;
			}
		}
		
		.tips {
			font-size: 28upx;
			line-height: 48upx; /* 175% */
			margin-top: 10upx;
			color: #fff;
		}
	}
}
</style>